<template>
  <div class="shopHistory">
      <el-dialog
        :title="operateType"
        :visible.sync="isShow"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              ></common-form>
             <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
    <div v-if="shopinformation.length!==0">
        <div class="shopHistory-box" v-for=" (val,index) in shopinformation" :key="index">
          <!-- 商品图片 -->
          <div class="shop-img">
            <a href="#">
              <img :src="val.shopCover?val.shopCover:'#'" >
            </a>
          </div>
          <div class="info-box">
            <router-link :to="{
              name:'order',
              params:{
                shop:val
              }
            }">
              <!-- 商品名称 -->
              <p class="title-shop">{{val.shopName}}</p>  
            </router-link>

            <template>
            <!-- 全部预约 -->
                <template v-if="$route.path==='/personal/order/status=0'">
                    <p class="info">预约时间: {{val.appointTime}}</p>
                    <p class="info">预约方式: {{val.appointWay}}</p>
                    <p class="info">店铺便签: {{val.shopLocation}}</p>
                </template>
                <!-- 已完成 -->
                <template v-if="$route.path==='/personal/order/status=1'">
                    <p class="info">预约时间: {{val.appointTime}}</p>
                    <p class="info">预约方式: {{val.appointWay}}</p>
                    <p class="info">店铺便签: {{val.shopLocation}}</p>
                </template>
                <!-- 未进行 -->
                <template v-if="$route.path==='/personal/order/status=2'">
                    <p class="info">预约时间: {{val.appointTime}}</p>
                    <p class="info">预约方式: {{val.appointWay}}</p>
                    <p class="info">店铺便签: {{val.shopLocation}}</p>
                </template>
                <!-- 待评价 -->
                <template v-if="$route.path==='/personal/order/status=3'">
                    <p class="info">预约时间: {{val.appointTime}}</p>
                    <p class="info">预约方式: {{val.appointWay}}</p>
                    <p class="info">店铺便签: {{val.shopLocation}}</p>
                </template>
                <template v-if="$route.path==='/shoppersonal/editcoupon'">
                
                </template>
                <!-- 我的优惠券 -->
                <template v-if="$route.path==='/shoppersonal/coupon'">
                
                </template>
                <!-- 我的收藏 -->
                <template v-if="$route.path==='/personal/mycollect'">             
                    <p class="info">店铺地址: {{val.shopLocation}}</p>
                    <p class="info">联系电话: {{val.shopPhone}}</p>
                    <p class="info">服务范围: {{val.shopRange}}</p>
                </template>
                <!-- 我的足迹 -->
                <template v-if="$route.path==='/personal/myfootmark'">
                    <p class="info">浏览时间: {{val.historyTime}}</p>
                    <p class="info">店铺地址: {{val.shopLocation}}</p>
                    <p class="info">店铺便签: {{val.shopLocation}}</p>
                </template>
                <template v-if="$route.path===' /personal/mycoupon'">
                    
                </template>
            </template>
          </div>
          <!-- 消费状态 -->
          <div class="status">
              <template v-if="$route.path==='/shoppersonal/editcoupon'">
                  <el-button type="primary" @click="edit">修改</el-button>
                  <el-button type="primary" @click="del">删除</el-button>
                </template>
                <template v-if="$route.path==='/shoppersonal/coupon'">
                  <el-button type="primary" @click="upcoupon">上架</el-button>
                  <el-button type="primary" @click="downcoupon">下架</el-button>
                </template>
                <template v-if="$route.path==='/personal/mycollect'">
                  <el-button type="primary" @click="delcollect(val.shopId)">删除收藏</el-button>
                </template>
                <template v-if="$route.path==='/personal/myfootmark'">
                <el-button type="primary" @click="delhistory(val.shopId)">删除记录</el-button>
                </template>
                <template v-if="$route.path===' /personal/mycoupon'">
                    <el-button type="primary" @click="downcoupon">使用</el-button>
                </template>
                <template v-if="$route.path==='/personal/order/status=0'">
                  <p>状态</p>
                </template>
                <template v-if="$route.path==='/personal/order/status=1'">
                    <el-button type="primary" @click="delappoint(val.appointId)">删除记录</el-button>
                </template>
                <template v-if="$route.path==='/personal/order/status=2'">
                    <el-button type="primary" @click="cancelappoint(val)">取消预约</el-button>
                </template>
                <template v-if="$route.path==='/personal/order/status=3'">
                    <el-button type="primary" @click="cancelappoint(val.appointId)">取消预约</el-button>
                </template>
          </div>
        </div>
    </div>
    <div class="nodata" v-if="shopinformation.length===0">
      <p>暂无数据</p>
    </div>
      <el-pagination
          @current-change="changePage"
          :current-page="1"
          background
          :page-size="size"
          layout="prev, pager, next"
          :total="total"
            >
          </el-pagination>
  </div>
</template>

<script>
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import {myfootmark,myallAppoints,myAppoints,myCollections,cancelAppoint,cancelCollection,cancelmyfootmark,deleteAppointRecord} from '../../../api/personalData/information/other'
export default {
    name:'Goods',
    data() {
      return {
          operateType:'',
          isShow:false,
          operateFormlabel:[],
          operateForm:{},
          shopinformation:[],
          userinfo:'',
          page:1,
          size:5
      }
    },
    methods:{
       changePage(val){
        console.log(123123);
        console.log(val);
        this.page=val
        this.shop()
      },
       shop(){
          const user = jwtDecode(cookie.getToken());
          this.userinfo = user
         const path = this.$route.path
        //  我的足迹
      if(path === '/personal/myfootmark'){
        myfootmark({userId:user.userId}).then(data=>{
           this.shopinformation = data.data.data
            this.total = data.data.data.total
        })
      }
        // 全部预约
        else if(path === '/personal/order/status=0'){
          myallAppoints({
              userId:user.userId,
              page:this.page,
              size:this.size
            }).then(data =>{
              this.shopinformation = data.data.data.date
               this.total = data.data.data.total
            })
        }
        // 已完成
        else if(path === '/personal/order/status=1'){
            myAppoints({
              userId:user.userId,
              page:this.page,
              states:1,
              size:this.size
            }).then(data =>{
              this.shopinformation = data.data.data.date
               this.total = data.data.data.total
            })
        }
        // 未进行
        else if(path === '/personal/order/status=2'){
           myAppoints({
              userId:user.userId,
              page:this.page,
              states:5,
              size:this.size
            }).then(data =>{
              this.shopinformation = data.data.data.date
               this.total = data.data.data.total
            })
        }
        // 待评价
        else if(path === '/personal/order/status=3'){
           myAppoints({
              userId:user.userId,
              page:this.page,
              states:4,
              size:this.size
            }).then(data =>{
              this.shopinformation = data.data.data.date
               this.total = data.data.data.total
            })
        }
        // 我的收藏
        else if(path === '/personal/mycollect'){
           myCollections({
              userId:user.userId,
              page:this.page,
              size:this.size
            }).then(data =>{
              this.shopinformation = data.data.data.date
              this.total = data.data.data.total
            })
        }
      },
      confirm(){
        if(this.operateType==='申请取消预约'){
          cancelAppoint(this.operateForm).then(data=>{
            console.log(data.data.data);
          })
        }
      },
       edit(){
          this.isShow=true
      },
      del(){
         this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(() => {
           this.$message({
             type: "success",
              message: "删除成功!"
            })
          })
      },
      upcoupon(){
        this.$confirm("你确定要上架此优惠券吗？",'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(() => {
           this.$message({
             type: "success",
              message: "上架成功!"
            })
          })
      },
      downcoupon(){
      },
      // 取消收藏
      delcollect(shopId){
        this.$confirm("你确定要取消收藏吗？",'提示',{
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
         }).then(() => {
           cancelCollection({
              userId:this.userinfo.userId,
              shopId:shopId
            }).then(data =>{
              this.$message({
                type: "success",
                  message: "取消成功!"
                })
                this.shop()
              console.log(data);
            })
          })
      },
      // 删除浏览记录
      delhistory(shopId){
         this.$confirm("你确定要删除浏览记录吗？",'提示',{
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
         }).then(() => {
           cancelmyfootmark({
              userId:this.userinfo.userId,
              shopIds:shopId
            }).then(data =>{
              this.$message({
                  type: "success",
                  message: data.data.data
                })
             this.shop()
            })
          //  this.$http({
          //   url:'/shops/user/history/deleteMyHistoryBrowse',
          //   method:'DELETE',
          //   params:{
          //     userId:this.userinfo.userId,
          //     shopIds:shopId
          //   },
          //   headers: { 'Authorization':cookie.getToken()}
          // }).then(data => {
          //   this.$message({
          //    type: "success",
          //     message: data.data.data
          //   })
          //    this.shop()
          // }).catch(err => {
          //     console.log(err);
          // })
          })
      },
      // 删除预约
      delappoint(appointId){
        this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(() => {
           deleteAppointRecord({appointId:appointId}).then(data =>{
              this.$message({
              type: "success",
              message: "删除成功!"
            })
             this.shop()
           })
          //   this.$http({
          //   url:'/shops/user/appoint/deleteAppointRecord',
          //   method:'DELETE',
          //   params:{
          //    appointId:appointId
          //   },
          //   headers: { 'Authorization':cookie.getToken()}
          // }).then(data => {
          //     this.$message({
          //     type: "success",
          //     message: "删除成功!"
          //   })
          //    this.shop()
          // }).catch(err => {
          //     console.log(err);
          // })
          })
      },
      // 申请取消预约
      cancelappoint(val){
        this.operateType='申请取消预约'
        this.isShow=true
        console.log(val);
         this.operateFormlabel =[
           {
            model:'season',
            label:'申请理由',
            type:'input',
            display:''
          }
        ]
        this.operateForm={
          season:'',
          shopId:val.shopId,
          userId:val.userId
        }
      }
    },
    created(){
         this.shop()
    },
    mounted(){
      // 同一组件复用
          const path = this.$route.path
          // 我的足迹
          if(path === '/personal/myfootmark'){
              
          }
          // 我的收藏
          else if(path === '/personal/mycollect'){
            
          }
          // 我的优惠券
          else if(path === '/personal/mycoupon'){
              
          }
          // 上下架优惠券
          else if(path === '/shoppersonal/coupon'){
                this.operateFormlabel = [
                {
                  model:'name',
                  label:'姓名',
                  type:'input'
                },
                {
                  model:'age',
                  label:'年龄',
                  type:'input'
                },
                {
                  model:'sex',
                  label:'性别',
                  type:'select',
                  opts:[
                    {
                      label:'男',
                      value:1
                    },
                    {
                      label:'女',
                      value:0
                    },
                  ]
                },
                    ]
                this.operateForm={
                      name:'',
                      age:'',
                      sex:''
                    }     
          }
          else if(path === '/shoppersonal/shoporder'){
                this.operateFormlabel = [
                {
                  model:'name',
                  label:'姓名',
                  type:'input'
                },
                {
                  model:'age',
                  label:'年龄',
                  type:'input'
                },
                {
                  model:'sex',
                  label:'性别',
                  type:'select',
                  opts:[
                    {
                      label:'男',
                      value:1
                    },
                    {
                      label:'女',
                      value:0
                    },
                  ]
                },
                    ]
                this.operateForm={
                      name:'',
                      age:'',
                      sex:''
                    }     
          }
          else if(path === '/shoppersonal/editcoupon'){
                this.operateFormlabel = [
                {
                  model:'name',
                  label:'姓名',
                  type:'input'
                },
                {
                  model:'age',
                  label:'年龄',
                  type:'input'
                },
                {
                  model:'sex',
                  label:'性别',
                  type:'select',
                  opts:[
                    {
                      label:'男',
                      value:1
                    },
                    {
                      label:'女',
                      value:0
                    },
                  ]
                },
                    ]
                this.operateForm={
                      name:'',
                      age:'',
                      sex:''
                    }     
          }
          // 我的预约
          else{

          }
    }
}
</script>

<style lang="less" scoped>
.nodata{
  width: 100%;
  height: 300px;
  p{
    text-align: center;
    line-height: 300px;
  }
}
.shopHistory{
  width: 100%;
  .shopHistory-box{
    width: 100%;
    padding: 20px 0;
    height: 100px;
    // background: pink;
    border-top: 1px solid #e5e5e5;
    .shop-img{
      margin-left: 20px;
      float: left;
      img{
            width: 90px;
            height: 90px;
            border-radius: 4px;
      }
    }
    .info-box{
          margin-left: 20px;
          float: left;
          height: 90px;
          width: 325px;
          position: relative;
      .title-shop{
        font-size: 16px;
        color: #222222;
        margin: 10px 0 10px 15px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 300px;
      }
      .info{
        font-size: 12px;
        color: #666666;
        margin-left: 15px;
        height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .price,.status{
      display: inline-block;
      line-height: 90px;
      text-align: center;
      font-size: 12px;
      color: #666666;
      height: 90px;
      width: 200px;
      button {
           margin-left: 10px;
            background: #ffffff;
            border: 1px solid #e5e5e5;
            border-radius: 100px;
            font-size: 14px;
            color: #666666;
            cursor: pointer;
            margin-top: 20px;
            text-align: center;
          }
    }
  }
}
</style>